<template>
    <div class="layout">
      <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
        <FormItem label="是否开启自动审核" prop="auditSwitch">
          <RadioGroup type="button" button-style="solid" v-model="formValidate.auditSwitch">
            <Radio label="true">开启</Radio>
            <Radio label="false">关闭</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="是否开启评论" prop="commentSwitch">
          <RadioGroup type="button" button-style="solid" v-model="formValidate.commentSwitch">
            <Radio label="true">开启</Radio>
            <Radio label="false">关闭</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="是否开启奖励" prop="rewardSwitch">
          <RadioGroup type="button" button-style="solid" v-model="formValidate.rewardSwitch">
            <Radio label="true">开启</Radio>
            <Radio label="false">关闭</Radio>
  
          </RadioGroup>
        </FormItem>
        <div class="label-item">
          <FormItem class="label-item" label="停留时间" prop="stayDuration">
            <Input type="number" v-model="formValidate.stayDuration">
              <span slot="append">S</span>
              <!-- <span slot="prepend">宽</span>
            <span slot="append">px</span> -->
            </Input>
  
          </FormItem>
          <FormItem class="label-item" label="奖励值" prop="rewardValue">
            <Input type="number" v-model="formValidate.rewardValue">
              <span slot="append">金豆</span>
              <!-- <span slot="prepend">高</span>
            <span slot="append">px</span> -->
            </Input>
          </FormItem>
        </div>
        <div class="label-item">
          <FormItem class="label-item" label="缩略图宽" prop="abbreviationPictureWidth">
            <Input type="number" v-model="formValidate.abbreviationPictureWidth">
              <span slot="prepend">宽</span>
              <span slot="append">px</span>
            </Input>
  
          </FormItem>
          <FormItem class="label-item" label="缩略图高" prop="abbreviationPictureHeight">
            <Input type="number" v-model="formValidate.abbreviationPictureHeight">
            <span slot="prepend">高</span>
            <span slot="append">px</span>
            </Input>
          </FormItem>
        </div>
        <div class="label-btns">
          <Button type="primary" @click="submit('formValidate')">保存</Button>
          <div class="progress-item" v-if="showProgress">
            <i-progress :percent="progressVal"></i-progress>
          </div>
        </div>
      </Form>
    </div>
  </template>
  <script>
  import { setSetting, createIndex, getProgress } from "@/api/index";
  import { handleSubmit } from "./validate";
  export default {
    props: ["res", "type"],
    data() {
      return {
        formValidate: {
          // 表单数据
          commentSwitch: true,
          auditSwitch: true,
          rewardSwitch: true,
          stayDuration: "0",
          rewardValue: "0",
          abbreviationPictureWidth: "200",
          abbreviationPictureHeight: "200",
        },
        progressVal: 0,
        showProgress: false,
        intervalProgress: null,
        ruleValidate: {}, // 验证规则
        result:""
      };
    },
    created() {
      this.init();
    },
    methods: {
      //保存
      submit(name) {
        let that = this;
        if (handleSubmit(that, name)) {
          this.setupSetting();
        }
      },
      // 保存设置
      setupSetting() {
        setSetting(this.type, this.formValidate).then((res) => {
          if (res.success) {
            this.$Message.success("保存成功!");
          } else {
            this.$Message.error("保存失败!");
          }
        });
      },
  
      // 实例化数据
      init() {
        this.result = JSON.parse(this.res);
  
        Object.keys(this.result).map((item) => {
          this.result[item] += "";
        });
        this.$set(this, "formValidate", { ...this.result });
        Object.keys(this.formValidate).forEach((item) => {
          this.ruleValidate[item] = [
            {
              required: true,
              message: "请填写必填项",
              trigger: "blur",
            },
            {
              validator: (rule, value, callback) => {
                if (value < 0) {
                  callback(new Error("不能输入负数！"));
                } else {
                  callback();
                }
              },
              trigger: "change",
            },
          ];
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "./style.scss";
  .label-item {
    display: flex;
  }
  ::v-deep .ivu-input {
    width: 140px !important;
  }
  </style>
  